{{extend ('./layout.html')}}

{{#block ("body")}}
{{extend ('./menu.html')}}
<div class="main-container">
	<div class="padding-md">
		<h2 class="header-text">
			Form Element
			<span class="sub-header">
							Basic form elements
						</span>
		</h2>
		<div class="smart-widget m-top-lg widget-dark-blue">
			<div class="smart-widget-header">
				用户权限
				<span class="smart-widget-option">
					<span class="refresh-icon-animated">
						<i class="fa fa-circle-o-notch fa-spin"></i>
					</span>
                    <a href="#" class="widget-toggle-hidden-option">
                        <i class="fa fa-cog"></i>
                    </a>
                    <a href="#" class="widget-collapse-option" data-toggle="collapse">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a href="#" class="widget-refresh-option">
                        <i class="fa fa-refresh"></i>
                    </a>
                    <a href="#" class="widget-remove-option">
                        <i class="fa fa-times"></i>
                    </a>
                </span>
			</div>
			<div class="smart-widget-inner">
				<div class="smart-widget-hidden-section">
					<ul class="widget-color-list clearfix">
						<li style="background-color:#20232b;" data-color="widget-dark"></li>
						<li style="background-color:#4c5f70;" data-color="widget-dark-blue"></li>
						<li style="background-color:#23b7e5;" data-color="widget-blue"></li>
						<li style="background-color:#2baab1;" data-color="widget-green"></li>
						<li style="background-color:#edbc6c;" data-color="widget-yellow"></li>
						<li style="background-color:#fbc852;" data-color="widget-orange"></li>
						<li style="background-color:#e36159;" data-color="widget-red"></li>
						<li style="background-color:#7266ba;" data-color="widget-purple"></li>
						<li style="background-color:#f5f5f5;" data-color="widget-light-grey"></li>
						<li style="background-color:#fff;" data-color="reset"></li>
					</ul>
				</div>
				<div class="smart-widget-body">
					<form action="/user/userAction?user_id={{user.user_id}}" method="post" enctype="multipart/form-data">

						{{#each(action_list)}}
						<label>{{this.action_name_zh}}</label>
						<input type="checkbox" name="check_all" class="check_all">
						<div class="row">
							{{#each(this.son)}}
							<div class="form-group inline-block col-md-3">
								<div class="inline-block">
									<div class="checkbox inline-block">
										<div class="custom-checkbox">
											<input type="checkbox" id="{{this.action_name_en}}" name="user_action[]" class="checkbox-red" value="{{this.action_name_en}}" {{this.checked?"checked":""}}>
											<label for="{{this.action_name_en}}"></label>
										</div>
										<div class="inline-block vertical-top">
											{{this.action_name_zh}}
										</div>
									</div>
								</div><!-- /.col -->

							</div>
							{{/each}}
						</div>
						{{/each}}


						<button type="submit" class="btn btn-success btn-sm">Submit</button>
					</form>
				</div>
			</div><!-- ./smart-widget-inner -->
		</div><!-- ./smart-widget -->

	</div><!-- ./padding-md -->
</div><!-- /main-container -->
<!-- Jquery -->
<script src="/js/jquery-1.11.1.min.js"></script>
<script>

	var check_all = document.getElementsByName('check_all');

	for(var key=0;key<check_all.length;key++)
	{
        check_all[key].addEventListener('click',function(){
            var actions = $(this).next(".row").find("input[name='user_action[]']");
            for(var item=0;item<actions.length;item++)
			{
			    if(actions[item].checked)
				{
                    actions[item].checked = false;
				}else{
                    actions[item].checked = true;
				}
			}
		});
	}


</script>
{{/block}}
